<template>
	<view>
		
		<view class="content">
			<image  class="conterListCLIst" :src="imgUrl+'/function.png'" mode=""></image>
			<view class="posconter">
				<view class="coner" >
					<Header :rooter="'/pages/index/index'"></Header>
				</view>
				<view style="height: 90rpx;"></view>
				<view class="borde-padd-24" >
					<view class="heade-conter-list">
						<view class="flex-height-between header">
							<view class="leixingcs">
								<view class="t">你的测试类型</view>
								<view class="r">{{forInfo.appraise}}</view>
								<view class="c">{{forInfo.personalityType}}</view>
								<view class="c">{{forInfo.personalityType2}}</view>
							</view>
							<image class="_img" :src="imgUrl+'/ceshi.png'" mode=""></image>
						</view>
						
						<view class="info" v-if="forInfo.conceptualDescription" v-html="forInfo.conceptualDescription"></view>
						<view class="info" v-else v-html="forInfo.description"></view>
					</view>
					<view class="conter-list" >
						<view class="title" v-if="forInfo.dimension">
							什么是{{forInfo.appraise}}?
						</view>
						<view v-if="forInfo.dimension" class="conterListAyy flex-line-height" v-for="(item,index) in forInfo.dimension">
							<view class="abbreviation">{{item['缩写']}}</view>
							<view class="type">{{item['类型']}}</view>
							<view class="">{{item['维度']}}</view>
						</view>
						<view class="info" v-if="!forInfo.conceptualDescription" v-html="forInfo.description">
							</view>
						<view class="info" v-if="forInfo.selfImprovement" v-html="forInfo.selfImprovement"></view>
					</view>
					<!-- suitableJob -->
				</view>
				
				<view v-if="type==1" class="borde-padd-24" style="background-color: #F7F8FA;padding-bottom: 1rpx;padding-bottom: 150rpx;">
					<view class="conter-list" >
						<view class="title">
							性格分析
						</view>
						<view class="info" v-html="forInfo.characterAnalysis"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							主要特质
						</view>
						<view class="info" v-html="forInfo.characteristics"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							领导模式
						</view>
						<view class="info" v-html="forInfo.leadershipModel"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							典型表现
						</view>
						<view class="info" v-html="forInfo.performance"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							倾向性顺序
						</view>
						<view class="info" v-html="forInfo.tendentiousOrder"></view>
					</view>
					
					<view class="conter-list" >
						<view class="title">
							解决问题模式
						</view>
						<view class="info" v-html="forInfo.rroblemSolvingMode"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							缺点
						</view>
						<view class="info" v-html="forInfo.disadvantage"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							建议
						</view>
						<view class="info" v-html="forInfo.suggest"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							适合领域
						</view>
						<view class="info" v-html="forInfo.suitableFields"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							工作环境倾向性
						</view>
						<view class="info" v-html="forInfo.workEnvironmentOrientation"></view>
					</view>
					<view class="conter-list" >
						<view class="title">
							适合工作
						</view>
						<view class="info" v-html="forInfo.suitableJob"></view>
					</view>
					
					
					
					
				</view>
				<view style="height: 100rpx;"></view>
			</view>
		</view>
		<view class="fenxiangconterList">
			<view class="rco" @click="shareUrl">分享测试报告</view>
		</view>
	</view>
</template>

<script>
	import {
		Request
	} from '@/utils/request.js'
	import Header from "./header.vue"
	export default{
		components:{
			Header
		},
		data(){
			return {
				forInfo:{},
				imgUrl:this.imgUrl,
				type:'',
				id:'',
			}
		},
		onLoad({answer,type,id}) {
			this.type=type;
			this.id=id;
			if(answer){
				this.appraisalexamReport(answer);
			}else{
				this.appraisalgetAppraisalResult();
			}
			console.log(id);
		},
		methods:{
			// {"answer":"1-1,2-1,3-1,4-1,5-1,6-1,7-1,8-1,9-1,10-1,11-1,12-1,13-1,14-1,15-1,16-1,17-1,18-1,19-1,20-1,21-1,22-1,23-1,24-1,25-1,26-1,27-1,28-1,29-1,30-1,31-1,32-1,33-1,34-1,35-1,36-1,37-1,38-1,39-1,40-0","isLoding":true,"type":"2"}
			// appraisal/getAppraisalResult;
			// https://app.zizijy.com/h5/#/pages/ai/baogao?type=2&id=303
			appraisalgetAppraisalResult(){
				Request('appraisal/getAppraisalResult',{
					type:this.type,
					id:this.id,
				}).then((res)=>{
					// console.log(res);
					this.forInfo=res.data.data;
					
					// this.forInfo=res.data.data;
				})
			},
			appraisalexamReport(answer){
				Request('appraisal/examReport',{
					answer:answer,
					type:this.type,
					id:this.id,
				},'post').then((res)=>{
					this.forInfo=res;
				})
			},
			shareUrl(){
				
				uni.setClipboardData({
					// type=1&id=202 https://app.zizijy.com/h5/#/pages/ai/baogao?type=2&id=undefined
					data: 'https://app.zizijy.com/h5/#/pages/ai/baogao?type='+this.type+'&id='+ this.id,
					success: function () {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						  });
						console.log('success');
					}
				});
				// 复制成功
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneSession",
				// 	type: 1,
				// 	summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
				// 	success: function (res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
				// });
			}
			
		}
	}
</script>
<style scoped>
	.coner{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}
	.conterListCLIst{
		width: 100%;
		height: 800rpx;
	}
	.posconter{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
	}
	.conterListCLIst{
		background-color: #F7F8FA;
	}
		
	.heade-conter-list{
		width: 702rpx;
		background: linear-gradient( 180deg, rgba(255,255,255,0.3) 0%, #FFFFFF 100%);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		box-sizing: border-box;
		padding: 0 32rpx;
		margin-bottom: 17rpx;
	}
	.conter-list{
		width: 702rpx;
		background: #FFFFFF;
		padding: 32rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.conterListAyy{
		width: 638rpx;
		height: 88rpx;
		background: #F0F2FC;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin-bottom: 16rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #646669;
		font-style: normal;
		text-transform: none;
	}
	.conterListAyy .abbreviation{
		width: 48rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		color: #FFFFFF;
		background: #3B5EEC;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 44rpx;
		font-style: normal;
		text-transform: none;
	}
	.conterListAyy .type{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		padding-left: 8rpx;
		padding-right: 24rpx;
		font-size: 28rpx;
		color: #3B5EEC;
		line-height: 44rpx;
		font-style: normal;
		text-transform: none;
	}
	.conter-list .title{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #0D0E0F !important;
		line-height: 44rpx;
		margin-bottom: 24rpx;
		font-style: normal;
		text-transform: none;
		position: relative;
	}
	.fenxiangconterList{
		width: 100%;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		padding:30rpx 24rpx ;
		z-index: 99;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.fenxiangconterList .rco{
		width: 702rpx;
		height: 80rpx;
		background: #3B5EEC;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
	.conter-list .title::after{
		content: '';
		width: 195rpx;
		height: 20rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		background: linear-gradient( 90deg, rgba(59,94,236,0.3) 0%, rgba(64,97,228,0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}
	.heade-conter-list ._img{
		width: 244rpx;
		height: 244rpx;
	}
	.leixingcs{
		padding-top: 24rpx;
	}
	.leixingcs .t{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
	.leixingcs .r{
		font-family: MiSans, MiSans;
		font-weight: bold;
		font-size: 96rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
	.leixingcs .c{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #0D0E0F;
		font-style: normal;
		text-transform: none;
	}
	.info{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #646669;
		line-height: 44rpx;
		font-style: normal;
		text-transform: none;
	}
	.header{
		
	}
</style>